<template>

	<u-skeleton rows="3" :loading="loading" :title="false" class="m-b-20 " :rowsHeight="[18,25,42]"
		:rowsWidth="['50%', '75%', '100%']" v-if="!shieldList.includes(record.dynamicId)">
		<view class="box">

			<view class="head flex-no-horizontal"
				style="display: flex;align-items: center;justify-content: space-between;flex-direction: row;">

				<view class="head-right flex-no-horizontal" @click="toUserInfo(record.userId)">
					<view class="head-right-icon">
						<u--image :src="record.avatar" mode="aspectFill" width="80rpx" height="80rpx" shape="circle"
							:lazy-load="true">
						</u--image>
					</view>
					<view class="head-right-name-time">
						<view class="name flex-no-horizontal">
							<view class="name-text m-r-5">
								{{record.username}}
							</view>
							<u--image :src="record.vimg" width="34rpx" height="34rpx" shape="circle"
								v-if="record.vololunteer"></u--image>
						</view>
						<view class="time">
							{{record.createdAt | myTimeFrom}}
						</view>
					</view>
				</view>

				<view class="head-left flex-no-horizontal" @click="followClick(record)" v-if="ifShowFollow">

					<view class="head-left-content flex-no-horizontal" v-if="!record.isFollow">
						<u-icon name="plus" color="rgba(0, 0, 0, 1)" size="15" style="margin-right: 10rpx;">
						</u-icon>
						<view>关注</view>
					</view>

					<view class="head-left-content-succ flex-no-horizontal" v-else>
						<view>已关注</view>
					</view>

				</view>

			</view>

			<!-- 违规动态 -->
			<view class="violation-box flex-no-horizontal"
				v-if="record.userId === user.id && isInHome && !record.status">
				<view class="violation-box-left f-base flex-no-horizontal" v-if="record.pushResult !== '审核中'">
					<u-icon name="eye-off" color="rgba(235, 91, 51, 1)" size="20"></u-icon>
					该贴涉嫌违规已被隐藏
				</view>

				<view class="violation-box-left f-base flex-no-horizontal" style="color: #3676ec;" v-else>
					<image src="/static/icon/icon-examine-user.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
					该贴正在审核
				</view>

				<view class="violation-box-right flex-no-horizontal">
					<button type="default" class="violation-box-right-appeal-btn f-xs"
						v-if="record.pushResult !== '审核中'" @click="appeal(record)">提起申诉</button>
					<button type="default" class="violation-box-right-appeal-btn f-xs"
						v-if="record.pushResult !== '审核中'" @click="toReleaseDynamic">重新编辑</button>
				</view>
			</view>

			<view class="content-text" @click="toDynamicDetail(record.dynamicId)">
				<view class="marrow content-text-tag" v-if="record.great">
					精华
				</view>
				<view class="set-top content-text-tag" v-if="record.top">
					置顶
				</view>
				<text id="textFont" ref="textFont">
					<view class="tips" v-if="elData.height > 50">
							全文
					</view>
					{{record.text}}
				</text>
			</view>

			<!-- 动态图片 -->
			<view class="main-img-single" :class="{'main-img-multiple':imgs.length !== 1}">

				<image :src="item" :mode="imgs.length !== 1 ? 'aspectFill' : 'aspectFit' " v-for="(item,index) in imgs"
					:key="index" @click="previewPhoto(imgs,index)"></image>

			</view>

			<view class="bottom-icon flex-no-horizontal">
				<view class="bottom-icon-item flex-no-horizontal" @click="moreClick" ref="moreClickRefs">
					<u-icon name="more-dot-fill" color="rgba(179, 180, 181, 1)" size="25"></u-icon>
				</view>
				<view class="bottom-icon-item flex-no-horizontal" @click="toDynamicDetail(record.dynamicId)">
					<u-icon name="chat" color="rgba(179, 180, 181, 1)" size="30"></u-icon>
					{{record.commentNum}}
				</view>
				<view class="bottom-icon-item flex-no-horizontal"
					@click="likeClick(record.isLike)">
					<!-- <u-icon name="thumb-up" :color=" record.isLike ? 'rgba(74, 188, 90, 1)' :'rgba(179, 180, 181, 1)'"
						size="30" v-if="!ifLikeShow && !record.isLike"></u-icon> -->
					
					<u-icon name="thumb-up-fill"
						:color="record.isLike ? 'rgba(74, 188, 90, 1)' :'rgba(179, 180, 181, 1)'" size="30"
						></u-icon>
					{{ !ifLikeShow ? record.likeNum : afterLikeNum}}
				</view>
			</view>

			<!-- 分享弹窗 -->
			<u-action-sheet title="分享到" :show="wechatPopupShow" :safeAreaInsetBottom="true" round="15"
				:closeOnClickOverlay="true" @close="wechatPopupShow = false">
				<view class="share flex-no-horizontal">
					<view @click="wechatShare('WXSceneSession',record)">
						<u--image src="../../static/img/weichat-color.png" width="35" height="35"></u--image>
						<view class="f-xs m-t-5">朋友</view>
					</view>
					<view @click="wechatShare('WXSceneTimeline',record)">
						<u--image src="../../static/img/weichat-moment-color.png" width="35" height="35"></u--image>
						<view class="f-xs m-t-5">朋友圈</view>
					</view>
				</view>
			</u-action-sheet>

			<!-- 举报弹窗 -->
			<complaint :PopupShow="complaintShow" :articleId="record.dynamicId" @closeComplaint="appealClick">
			</complaint>

			<!-- 删除动态弹窗 -->
			<confirmPopup :popupShow="confirmPopupShow" title="删除动态" subhead="是否删除该动态" @popupHide="confirmPopupHide"
				@popupConfirm="delConfirm"></confirmPopup>

			<!-- 隐藏弹窗 -->
			<confirm-popup :popupShow="hidePopupShow" subhead="是否隐藏该动态？" confirmBg="#000000" @popupHide="hideClick"
				@popupConfirm="confirmHide"></confirm-popup>

			<!-- 置顶弹窗 -->
			<confirm-popup :popupShow="topPopupShow" :subhead="record.top? '是否取消置顶该动态？' : '是否置顶该动态？'"
				@popupHide="topClick" @popupConfirm="confirmTop" confirmBg="#000000"></confirm-popup>

			<!-- 加精弹窗 -->
			<confirm-popup :popupShow="greatPopupShow" :subhead="record.great?'是否取消加精该动态？': '是否加精该动态？'"
				@popupHide="greatClick" @popupConfirm="confirmGreat" confirmBg="#000000"></confirm-popup>

			<!-- 取关动态弹窗 -->
			<!-- <confirmPopup :popupShow="cancelFollowPopupShow" title="取消关注" subhead="是否取消该关注"
				@popupHide="cancelFollowPopupHide" @popupConfirm="cancelFollowConfirm"></confirmPopup> -->

			<!-- 拉黑动态弹窗 -->
			<confirmPopup :popupShow="blockDyanamicShow" title="是否拉黑该动态" subhead="拉黑后无法查看此动态"
				@popupHide="blockDyanamicClose" @popupConfirm="blockDyanamicConfrim"></confirmPopup>

		</view>
	</u-skeleton>
</template>

<script>
	import complaint from './complaint.vue'
	import confirmPopup from './currencyPopup.vue'
	import {
		previewImage
	} from '../../../utility/download.js'
	import {
		communityGiveLikeApi,
		communityCancelLikeApi,
		communityAppealAddApi,
		userFollowAddApi,
		communityDelApi
	} from '../../../api/index.js'
	import {
		greateApi,
		topApi,
		hideApi,
		appealApi
	} from '../../../api/examine.js'
	import {
		ifLoginFun
	} from '../../../utility/weChatLogin.js'
	import {
		myTimeFrom
	} from '../../../utility/time.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		props: {
			ifShowFollow: { //是否显示关注
				type: Boolean,
				default () {
					return true;
				}
			},
			record: {
				type: Object,
				default () {
					return {};
				}
			},
			imgs: {
				type: Array,
				default () {
					return [];
				}
			},
			typeEntranceEntry: { //判断是从哪个入口进入 pCenter 个人详情
				type: String,
				default () {
					return '';
				}
			},
			// 是否在用户页面
			isInHome: {
				type: Boolean,
				default () {
					return false
				}
			}
		},
		components: {
			complaint,
			confirmPopup
		},
		filters: {
			myTimeFrom(e) {
				return myTimeFrom(e)
			},
		},
		data() {
			return {
				ifChooseMore: false, //操作更多
				ifLike: false, //点赞
				ifLikeShow: false, //点赞后。
				wechatPopupShow: false,
				afterLikeNum: this.record.likeNum, //点赞后，点赞数
				complaintShow: false, //举报弹窗
				blockDyanamicShow: false, //拉黑弹窗
				loading: true,
				confirmPopupShow: false,
				cancelFollowPopupShow: false,
				hidePopupShow: false, // 隐藏弹窗
				greatPopupShow: false,
				topPopupShow: false,
				top: 172,
				elData: {} //文本高度等信息

			};
		},
		computed: {
			...mapState({
				user: state => state.userInfo,
				shieldList: state => state.shieldList
			})
		},
		created() {
			setTimeout(() => {
				this.loading = false
			}, 1000)
		},
		mounted() {
			this.$nextTick(() => {
				// console.log(this.$refs.textFont)
				setTimeout(()=>{
					const query = uni.createSelectorQuery().in(this);
					query.select('#textFont').boundingClientRect(data => {
						this.elData = data;
						this.$forceUpdate()
					}).exec();
				},1300)
			})
		},
		methods: {
			...mapMutations(['setShieldList']),
			//更多点击
			moreClick(e) {
				//判断是否登录
				if (!ifLoginFun()) {
					return
				}
				let data = {
					record: this.record,
					offsetY: e.detail.y,
				}
				this.$emit('moreClick', data)
			},
			//关注点击
			async followClick(item) {
				//判断是否登录
				if (!ifLoginFun()) {
					return
				}
				this.$emit('followChange', item)
				// try {
				// 	if (!item.isFollow) {
				// 		// 关注操作
				// 		const res = await userFollowAddApi({
				// 			beFollowId: item.userId,
				// 			following: true
				// 		})
				// 		let data = {
				// 			userId: item.userId,
				// 			isFollow: true
				// 		}
				// 		uni.showToast({
				// 			title: '关注成功',
				// 			icon: 'none'
				// 		})
				// 		this.$emit('followChange', data)
				// 	} else {
				// 		this.cancelFollowPopupShow = true
				// 	}
				// } catch (e) {
				// 	//TODO handle the exception
				// 	uni.showToast({
				// 		title: e.message || e.data,
				// 		icon: 'none'
				// 	})
				// }
			},

			//跳转动态详情
			toDynamicDetail(id) {
				//判断是否登录
				if (!ifLoginFun()) {
					return
				}
				uni.navigateTo({
					url: '../community/dynamicDetail?id=' + id
				})
			},

			//跳转用户信息
			toUserInfo(id) {
				//判断是否登录
				if (!ifLoginFun()) {
					return
				}
				if (this.typeEntranceEntry != 'pCenter') {
					uni.navigateTo({
						url: '../community/userInfo?userId=' + id
					})
				}
			},

			//预览图片
			previewPhoto(url, index) {
				previewImage(url, index)
			},

			//隐藏操作弹窗
			hideMorePopup() {
				this.ifChooseMore = false
				this.$emit('hideTabs')
			},

			//隐藏动态弹窗
			hideClick() {
				this.hidePopupShow = !this.hidePopupShow
				this.hideMorePopup()
			},

			appeal(data) {
				this.$emit('appeal', data)
			},

			toReleaseDynamic() {
				uni.navigateTo({
					url: '/pages/community/releaseDynamic?data=' + JSON.stringify(this.record)
				})
			},

			//确定隐藏动态弹窗
			async confirmHide() {
				try {
					const res = await hideApi({
						id: this.record.dynamicId,
						hide: 1
					})
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.$emit('handleHide')
					this.hideClick()
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}

			},

			// 置顶动态弹窗
			topClick() {
				this.topPopupShow = !this.topPopupShow
				this.hideMorePopup()
			},

			// 置顶操作
			async confirmTop() {
				try {
					const res = await topApi({
						id: this.record.dynamicId,
						top: this.record.top ? 0 : 1
					})
					this.$emit('handleTopAndGreat', {
						dynamicId: this.record.dynamicId,
						type: 'top',
						value: this.record.top ? 0 : 1
					})
					this.topClick()
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},

			// 加精动态弹窗
			greatClick() {
				this.greatPopupShow = !this.greatPopupShow
				this.hideMorePopup()
			},

			// 加精操作
			async confirmGreat() {
				console.log(this.record.great)
				try {
					const res = await greateApi({
						id: this.record.dynamicId,
						great: this.record.great ? 0 : 1
					})
					this.$emit('handleTopAndGreat', {
						dynamicId: this.record.dynamicId,
						type: 'great',
						value: this.record.great ? 0 : 1
					})
					this.greatClick()
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},


			//举报点击
			appealClick() {
				this.complaintShow = !this.complaintShow
				this.ifChooseMore = false
				this.$emit('hideTabs')
			},

			// 确认弹窗关闭
			confirmPopupHide(e) {
				this.ifChooseMore = false
				this.$emit('hideTabs')
				this.confirmPopupShow = e
			},

			//取消关注 弹窗关闭
			cancelFollowPopupHide(e) {
				this.cancelFollowPopupShow = e
			},

			//取消关注弹窗 确定
			async cancelFollowConfirm() {
				try {
					// 取关操作
					const res = await userFollowAddApi({
						beFollowId: this.record.userId,
						following: false
					})
					let data = {
						userId: this.record.userId,
						isFollow: false
					}
					uni.showToast({
						title: '取关成功',
						icon: 'none'
					})
					this.$emit('followChange', data)
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
				this.cancelFollowPopupShow = false
			},

			//确认弹窗 确定
			delConfirm() {
				this.deleteDynamic(this.record.dynamicId)
				this.confirmPopupShow = false
			},
			handleDelete() {
				this.confirmPopupShow = true
				this.$emit('hideTabs')
			},
			//删除点击
			async deleteDynamic(id) {
				try {
					const res = await communityDelApi({
						articleId: id
					})
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					})
					this.$emit('refresh')
					this.$emit('hideTabs')
					this.ifChooseMore = false
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					this.$emit('hideTabs')
					this.ifChooseMore = false
				}
			},

			//点赞点击
			async likeClick(ifLike) {
				//判断是否登录
				if (!ifLoginFun()) {
					return
				}
				try {
					if (!ifLike) {
						//点赞
						const res = await communityGiveLikeApi({
							articleId: this.record.dynamicId, //发布动态 id
							authorId: this.record.userId, //发布动态作者 id
						})
						uni.showToast({
							title: '点赞成功',
							icon: 'none'
						})
						
						this.record.isLike = true
						this.ifLikeShow = true
						this.ifLike = true
						this.afterLikeNum = this.afterLikeNum + 1
					} else {
						//取消点赞
						const res = await communityCancelLikeApi({
							articleId: this.record.dynamicId, //发布动态 id
						})
						uni.showToast({
							title: '取消点赞',
							icon: 'none'
						})
						this.record.isLike = false
						this.ifLikeShow = true
						this.ifLike = false
						this.afterLikeNum = this.afterLikeNum - 1
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			// 拉黑弹窗 取消
			blockDyanamicClose(e) {
				this.ifChooseMore = false
				this.$emit('hideTabs')
				this.blockDyanamicShow = e
			},

			//拉黑
			shield() {
				// this.setShieldList(this.record.dynamicId)
				this.$emit('hideTabs')
				this.blockDyanamicShow = true
			},

			// 拉黑弹窗 确定
			blockDyanamicConfrim() {
				this.$emit('hideTabs')
				this.setShieldList(this.record.dynamicId)
				this.blockDyanamicShow = false
			},

			//打开分享弹窗
			shareClick() {
				this.wechatPopupShow = !this.wechatPopupShow
				this.ifChooseMore = !this.ifChooseMore
			},

			//分享微信
			wechatShare(shareType, item) {
				let parameter = {}
				//  this.imgs.length === 0 文字分享 false 图文分享
				this.imgs.length === 0 ? parameter = {
					type: 1,
					summary: item.text
				} : parameter = {
					type: 0,
					href: 'http://seed.relaverse.cn/#/',
					title: '轻松小镇',
					summary: item.text,
					imageUrl: this.imgs[0]
				}
				uni.share({
					provider: "weixin",
					scene: shareType,
					...parameter,
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '分享失败~',
							icon: 'none'
						})
					},
					complete: (com) => {
						this.wechatPopupShow = !this.wechatPopupShow
					}
				})
			},

		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin-bottom: 40rpx;

		.head {
			justify-content: space-between;

			.head-right {

				.head-right-icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: $uni-border-radius-circle;
					}
				}

				.head-right-name-time {
					width: 380rpx;

					.name {
						font-size: $uni-font-size-lg;
						color: $uni-color-black;
						margin-bottom: 10rpx;

						.name-text {
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						image {
							margin-left: 10rpx;
							width: 34rpx;
							height: 34rpx;
							border-radius: $uni-border-radius-circle;
						}

					}

					.time {
						font-size: 22rpx;
						color: rgba(143, 144, 145, 1);
					}

				}

			}

			.head-left {
				justify-content: flex-end;

				.head-left-content {
					justify-content: space-around;
					padding: 0 30rpx;
					height: 60rpx;
					border-radius: 30rpx;
					border: 2rpx solid rgba(51, 51, 51, 1);

					view {
						color: #333333;
						font-size: 22rpx;
					}

				}

				.head-left-content-succ {
					justify-content: center;
					width: 145rpx;
					height: 60rpx;
					border-radius: 30rpx;
					background-color: rgba(247, 247, 247, 1);

					view {
						color: rgba(178, 180, 181, 1);
						font-size: 22rpx;
					}

				}

			}

		}

		.violation-box {
			margin: 40rpx 0 0;
			justify-content: space-between;

			.violation-box-left {
				color: rgba(235, 91, 51, 1);
			}

			.violation-box-right {
				justify-content: space-between;

				.violation-box-right-appeal-btn {
					padding: 0 20rpx;
					border-radius: 36rpx;
					border: 1rpx solid rgba(0, 0, 0, 1);
					background-color: #FFFFFF;
				}

				.violation-box-right-appeal-btn:last-child {
					margin-left: 10rpx;
				}

				.violation-box-right-appeal-btn::after {
					border: 0;
				}
			}
		}

		.content-text {
			margin: 40rpx 0 !important;
			color: $uni-color-black;
			position: relative;
			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;

			.content-text-tag {
				font-size: 10px;
				color: #FFFFFF;
				border-radius: 6rpx;
				text-align: center;
				padding: 0 4rpx;
				width: 82rpx;
				display: inline-block;
				margin-right: 10rpx;
				height: 42rpx;
				line-height: 42rpx;
				vertical-align: top;
			}

			.tips {
				width: 140rpx;
				height: 40rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);
				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
				color: #007aff;
				font-size: 30rpx;
			}

			.marrow {
				background: linear-gradient(0deg, rgba(177, 134, 208, 0.99), rgba(126, 56, 255, 0.99));
			}

			.set-top {
				background: linear-gradient(180deg, #2553FF, #57B2FF);
			}
		}

		.main-img-single {
			height: 670rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}

		.main-img-multiple {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: left;
			flex-wrap: wrap;

			image {
				width: 216rpx;
				height: 216rpx;
				margin-left: 10rpx;
				margin-bottom: 10rpx;

				&:nth-child(3n+1) {
					margin-left: 0;
				}
			}

		}

		.bottom-icon {
			margin-top: 20rpx;
			justify-content: space-between;
			position: relative;

			.bottom-icon-item {
				justify-content: center;
				font-size: 24rpx;
				color: rgba(179, 180, 181, 1);
			}
		}

		.share {
			justify-content: space-around;
			padding: 0 40rpx 120rpx;
		}

		.popup-select {
			width: 266rpx;
			left: 40rpx;
			position: absolute;
			background-image: url(../../../static/img/dynamic-select-bg.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

			view {
				height: 86rpx;
				padding: 0 20rpx;
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				justify-content: center;
				border-bottom: 2rpx solid #f0f0f0;
			}
		}

	}
</style>
